@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-feature-settings:
    'rlig' 1,
    'calt' 1,
    'ss01' 1,
    'ss06' 1;
}

[data-reach-skip-link] {
  @apply sr-only;
}

[data-reach-skip-link]:focus {
  @apply not-sr-only fixed ml-6 top-0 bg-white text-lg px-6 py-2 mt-2 outline-none focus:ring z-50;
}

.dark .invert-on-dark {
  filter: invert(1) brightness(1.8);
}

body {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 300px),
    fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0),
    fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0);
}

.dark body {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111 300px),
    fixed 0 0 / 20px 20px radial-gradient(#313131 1px, #000 0),
    fixed 10px 10px / 20px 20px radial-gradient(#313131 1px, #000 0);
}
